<!--
 * @Description:
 * @Version: 1.0
 * @Autor: codergzh
 * @Date: 2020-07-21 10:36:11
 * @LastEditors: codergzh
 * @LastEditTime: 2020-07-24 09:22:11
-->

<!-- 获取state的值:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation -->
<!--
    <template>
        <div>
            <p>获取store里的值：{{ appName }}</p>
            <p>获取store模块里的值：{{ userName }}</p>
        </div>
    </template>
    <script>
    // import vuex from 'vuex'
    // const mapState = vuex.mapState
    import { mapState } from 'vuex' // 这是解构赋值，和上面的意思一样

    // 获取使用命名空间的模块
    // import { createNamespacedHelpers } from 'vuex'
    // const { mapState } = createNamespacedHelpers('user')

    export default {
    computed: {
        ...mapState([ // ...是展开操作符，展开一个对象
        'appName'
        ]),
        ...mapState({
        userName: state => state.user.appName
        }), // 上面两种方式是一样的
        appName () {
        return this.$store.state.appName
        },
        userName () {
        return this.$store.state.user.userName // 加上模块名
        }
        // 获取使用命名空间的模块里的值
        // ...mapState({ // 使用createNamespacedHelpers mapState的方式
        //   userName: state => state.userName
        // }),
        // ...mapState('user', { // 直接使用mapState的方式
        //   userName: state => state.userName
        // }),
    }
    }
    </script>
 -->
<!-- 获取getters的值 -->
<!--
  <template>
      <div>
          <p>获取getters里的值：{{ appNameWithVersion }}</p>
      </div>
  </template>
  <script>
  import { mapGetters } from 'vuex'
  // import { createNamespacedHelpers } from 'vuex' // 获取使用命名空间的模块
  // const { mapGetters } = createNamespacedHelpers('user')
  export default {
    computed: {
      // 获取getters里的值
      appNameWithVersion () {
        return this.$store.getters.appNameWithVersion
      },
      ...mapGetters([ // 使用mapGetters
        'appNameWithVersion'
      ]),
      // 获取使用命名空间的模块里的值
      ...mapGetters([ // 使用createNamespacedHelpers mapGetters的方式
        'appNameWithVersion'
      ]),
      ...mapGetters('user', { // 直接使用mapGetters的方式
        appNameWithVersion: 'appNameWithVersion'
      })
    }
  }
  </script>
-->

<!-- mutations：模块内的mutations方法，默认不用加模块名，如果模块中使用了命名空间namespaced为true，则要加上模块名 -->
<!--
  <template>
      <div>
        <p>获取store里appName的值：{{ appName }}</p>
        <button @click="handleChangeAppName">修改appName</button>

        <p>获取store里appVersion的值：{{ appVersion }}</p>
        <button @click="handleAddVersion">增加属性</button>

        <p>获取store,user模块里userName的值：{{ userName }}</p>
        <button @click="handleChangeUserName">修改模块里的用户名</button>
      </div>
  </template>
  <script>
  import { mapMutations } from 'vuex'
  export default {
    computed: {
      appName () {
        return this.$store.state.appName
      },
      appVersion () {
        return this.$store.state.appVersion
      },
      userName () {
        return this.$store.state.user.userName
      }
    },
    methods: {
      ...mapMutations([
        'SET_APP_NAME',
        'SET_USER_NAME' // 模块里的方法
      ]),
      handleChangeAppName () {
        // 方式一：方法和参数分开写，且只有一个参数
        this.$store.commit('SET_APP_NAME', 'newAppName')
        // 方式二：方法和参数分开写，有多个参数
        this.$store.commit('SET_APP_NAME', {
          appName: 'newAppName'
        })
        // 方式三：方法和参数写一起，方法写在type里
        this.$store.commit({
          type: 'SET_APP_NAME',
          appName: 'newAppName'
        })
        // 方式四（1）：配合mapMutations使用
        this.$store.commit({
          appName: 'newAppName'
        })
        // 方式四（2）
        this.SET_APP_NAME('newAppName')
      },
      handleAddVersion () { // 增加version
        this.$store.commit('SET_APP_VERSION')
      },
      handleChangeUserName () {
        this.SET_USER_NAME('newUserName')
      }
    }
  }
  </script>
 -->
<!-- actions:实现异步操作，模块中命名空间namespaced不为true，模块内的actions会默认注册到全局，所以使用模块里的actions不用加模块名-->
<template>
  <div>
    <p>异步请求更新：{{ appName }}</p>
    <button @click="updateAppNameA">异步请求更新appName</button>
    <b/>
    <button @click="registerModule">动态注册模块</button>
    <p v-for="(item, index) in todoList" :key="index">{{ item }}</p>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  computed: {
    appName () {
      return this.$store.state.appName
    },
    todoList () {
      // 判断todo模块是不是存在，不存在就返回空数组
      return this.$store.state.todo ? this.$store.state.todo.todoList : []
    }
  },
  methods: {
    ...mapActions([
      'updateAppName' // dom里可以设置相同的方法名，也可以在dom中定义的方法名中调用该方法
    ]),
    updateAppNameA () {
      // this.updateAppName()
      // 也可以不使用mapActions直接调用
      this.$store.dispatch('updateAppName')
      // this.$store.dispatch('updateAppName', 'payload') // 也可以传参
    },
    registerModule () {
      // 添加到根state里
      this.$store.registerModule('todo', {
        state: {
          todoList: ['学习', '工作', '睡觉']
        }
      })
      // 添加到user模块里
      // this.$store.registerModule(['user', 'todo'], {
      //   state: {
      //     todoList: ['学习', '工作', '睡觉']
      //   }
      // })
    }
  }
}
</script>
